<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>异常页面</title>
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
      }

      .error-body {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        overflow: hidden;
      }

      .center-box {
      }

      .width100 {
        width: 100%;
        padding: 10px;
      }

      .error-button {
        box-sizing: border-box;
        padding: 10px 15px;
        text-align: center;
        color: #fffdfd;
        background: #009688;
      }

      .error-button-animation {
        animation: rippleDrop 0.6s linear;
      }

      @keyframes rippleDrop {
        100% {
          opacity: 0;
        }

        50% {
          opacity: 0.3;
        }

        0% {
          opacity: 1;
        }
      }

      .error-box-info {
        font-size: 12px;
        line-height: 28px;
        color: #380a0a;
        box-sizing: border-box;
        padding: 20px;
      }

      .error-box-info .line {
        border-top: 1px solid #962300a8;
        border-bottom: 1px solid #962300a8;
      }

      .error-box-info .index,
      .error-box-info .code {
        color: #af0c0c;
        font-size: 14px;
        user-select: text;
      }

      .error-box-info .row {
        width: 100%;
      }

      .box-b {
        box-sizing: border-box;
      }
    </style>
    <script>
      const loadPage = "./client.html";
      let mainURL = "";
      function reloadMainPage() {
        document.querySelector(".error-button").className =
          "error-button error-button-animation";
        try {
          //window.androidJS.executeMethod('system/reloadMainPage','GET','');
          // window.location.href = loadPage;
          window.location.href = "#";
          setTimeout(function () {
            window.location.href = mainURL;
          }, 1000);
          //window.nativeJS.webViewReload();
        } catch (e) {}
        setTimeout(() => {
          document.querySelector(".error-button").className = "error-button ";
        }, 1000);
      }

      function setErrorInfo(errorCode, errorDescription, method, url, mainUrl) {
        mainURL = mainUrl;
        const html = `<div class="width100" style="text-align:center;font-size:44px;color:#673ab7;font-family: fantasy;font-weight: bold;">${errorCode}</div>
            <p class="width100" style="font-size:18px;color:#999;word-wrap: break-word">
              ${decodeURI(errorDescription) || "连接失败！"}
            </p>
            <div class="width100" style="font-size:12px;color:#999">${method}: ${url}</div>`;
        document.querySelector(".error-info").innerHTML = html;
      }

      function getErrorParams() {
        try {
          const url = window.location.href;
          const params = eval(
            `({'${url
              .substring(url.indexOf("?") + 1)
              .replace(/=/g, "':'")
              .replace(/&/g, "','")}'})`
          );
          setErrorInfo(
            params.errorCode,
            params.errorDescription,
            params.method,
            unescape(params.url),
            unescape(params.mainUrl)
          );

          console.log(
            "🚀 ~ file: debug-error.html:130 ~ getErrorParams ~ params:",
            params
          );
        } catch (error) {}
      }

      setTimeout(() => {
        getErrorParams();
      }, 200);
    </script>
  </head>

  <body>
    <div class="error-box-info box-b">
      <div class="row box-b">
        <p>
          <span class="index">1</span>.请检查项目
          <span class="code">`build.gradle`</span>
          文件中的<span class="code"> `MAIN_URL`</span>
          路径是否可访问
        </p>
        <p>
          <span class="index">2</span>.请检查项目
          <span class="code">`MAIN_URL`</span>
          路径所指向的入口程序中是否 可访问
          <span class="code">`window.nativeJS`</span> 对象
        </p>
        <p>
          <span class="index">3</span>.如果使用的 vue 项目模板，请先添加
          <span class="code">`npm i`</span> 依赖。 之后使用<span class="code"
            >`npm run serve`</span
          >启动程序后再试
        </p>
        <p>
          <span class="index">4</span>.如果如果要进行打包，先使用
          <span class="code">`npm run build`</span>对vue页面项目进行打包，
          <br />
          后将打包文件复制到android项目的
          <span class="code">`src/assets/ui/`</span>目录下。
          <br />
          再修改<span class="code">`build.gradle`</span>文件的
          <span class="code">`MAIN_URL`</span>为
          <span class="code">`file:///android_asset/ui/index.html`</span>
          。注意其中配置类型为字符是需要添双引号并且使用<span class="code"
            >\</span
          >转义, 实际值应为<span class="code"
            >"\"file:///android_asset/ui/index.html\""</span
          >
        </p>
        <p>
          <span class="index">5</span>.若，vue页面打包后发现白屏时，请先确认打包是否兼容ES5。或检查使用vite打包后的index.html 页面的
          中的<span class="code">script</span>节点中是否存在 <span class="code">nomodule</span> 关键字，如果，请删除。
        </p>
      </div>
    </div>
    <div class="error-body box-b">
      <div style="width: 100%; height: auto">
        <div class="error-info">
          <div style="width: 100%; text-align: center">没有更多信息 !</div>
        </div>
        <div
          class="width100"
          style="
            display: flex;
            justify-content: center;
            padding-bottom: 100px;
            box-sizing: border-box;
          "
          onclick="reloadMainPage()"
        >
          <div class="error-button" style="flex-grow: 1">重试</div>
        </div>
        <div class="width100">函数测试</div>
        <div id="fn-box"></div>
      </div>
    </div>
  </body>
  <script>
    let methods = {
      isConnection: {
        fn: function () {
          return nativeJS.isConnection();
        },
        label: "isConnection",
        result: null,
      },
      // webViewReload: {
      //   fn: function () {
      //     nativeJS.webViewReload();
      //   },
      //   label: "webViewReload",
      //   result: null,
      // },
      showNotify: {
        fn: function () {
          return nativeJS.showNotify("标题", new Date() + "这是一段内容文字");
        },
        label: "showNotify",
        result: null,
      },
      getSystemInfo: {
        fn: function () {
          return nativeJS.getSystemInfo();
        },
        label: "getSystemInfo",
        result: null,
      },
      playPromptSound: {
        fn: function () {
          return nativeJS.playPromptSound();
        },
        label: "playPromptSound",
        result: null,
      },
      playPromptSoundUrl: {
        fn: function () {
          return nativeJS.playPromptSound(
            "http://m10.music.126.net/20230323085042/2a1bf8479d212f75620ea34329098599/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3"
          );
        },
        label:
          "'http://m10.music.126.net/20230323085042/2a1bf8479d212f75620ea34329098599/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3'<br/>playPromptSound(url)",
        result: null,
      },
      cancelPromptSound: {
        fn: function () {
          return nativeJS.cancelPromptSound();
        },
        label: "cancelPromptSound()",
        result: null,
      },
      playVibrator: {
        fn: function () {
          return nativeJS.playVibrator(
            true,
            [3000, 1500, 3000, 1500, 1500, 1200, 1200, 1100]
          );
        },
        label: "playVibrator",
        result: null,
      },
      cancelVibrator: {
        fn: function () {
          return nativeJS.cancelVibrator();
        },
        label: "cancelVibrator",
        result: null,
      },
    };
    function executeSystemMethod(key) {
      let result = "";
      try {
        let method = methods[key];
        result = method.fn();
        if (typeof result == "object") {
          result = JSON.stringify(result);
        }
      } catch (e) {
        result = "出现错误！";
      }
      document.querySelector(`#${key}`).innerHTML = result;
    }
    let html = "";
    for (let i = 0; i < Object.keys(methods).length; i++) {
      let key = Object.keys(methods)[i];

      html += `<div class="width100"
                    style="display: flex;justify-content: center;padding-bottom: 10px;box-sizing: border-box;"
                    onclick="executeSystemMethod('${key}')">
                  <div class="error-button" style="flex-grow: 1;overflow:hidden">${methods[key].label}</div>
                </div>
                <div class="width100" id="${key}"></div>`;
    }
    document.querySelector(`#fn-box`).innerHTML = html;
  </script>
</html>
